@charset 'utf-8';
@import '~angular-instantsearch/bundles/instantsearch-theme-algolia.css';

$white: #FFFFFF;
$media-red: #E91D00;
$media-red-dark: #CE1312;
$media-gray: #E8E8E8;
$media-gray-light: #F8F8F8;
$media-bg: #F1F1F1;
$media-text-color: #333333;
$media-blue: #167AC6;
$header-height: 56px;
$highlight-color: #FFFFD4;
$shadow-color: rgba(0, 0, 0, .1);

[class^='ais-'] {
  font-size: inherit;
}

body {
  min-height: 100%;
  font-family: Roboto;
  background: #F1F1F1;
}

a {
  color: $media-text-color;
}

hr {
  margin: 10px 14px;
}

.is-logo {
  float: left;
  margin-left: 18px;
}

.logo {
  margin-left: 15px;
  font-size: 30px;
  font-weight: bold;
  float: left;

  &:hover {
    text-decoration: none;
  }

  i {
    margin-left: 5px;
    color: $media-red;
  }
}

header {
  background: $white;
  padding: 10px;
  border-bottom: 1px solid $media-gray;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;

  .searchbox-container {
    margin-left: 240px;
    max-width: 400px;

    .input-group {
      width: 100%;
    }

    .ais-SearchBox {
      max-width: inherit;

      &-input {
        border-radius: 0;
        margin-top: 6px;
        padding: 0.5rem;
        padding-right: 1rem;
        width: 100%;
      }

      &-submit {
        right: .3em;
        left: unset;
      }
    }
  }
}

section {
  background: $media-bg;
  min-height: 100%;
  z-index: 1;

  aside {
    position: fixed;
    top: $header-height + 14px;
    left: 0;
    bottom: 10px;
    width: 230px;
    background: $white;
    border-right: 1px solid $media-gray;

    .nav {
      margin: 0 20px;

      li {
        a {
          display: block;
          padding: 2px 10px;
          margin: 10px 0;

          &:hover {
            color: $white;
            background: $media-text-color;
          }
        }

        &.separator {
          height: 1px;
          background: $media-gray;
        }
      }
    }

    h5 {
      color: $media-red-dark;
      margin-left: 30px;
      text-transform: uppercase;
      font-size: 10px;
      margin-top: 20px;
    }

    .ais-RefinementList,
    .ais-RatingMenu {
      margin: 0 20px;

      &-count {
        background: #BBBBBB;
        border-radius: 8px;
        display: block;
        color: #FFF;
        float: right;
        font-size: .8em;
        padding: 0.1rem 0.4rem;

        &:before,
        &:after {
          content: '';
        }
      }
    }

    .ais-RatingMenu {
      &-link {
        display: block;

        & > * {
          display: inline-block;
          margin-left: 0;
        }
      }

      &-label {
        color: #333;
        position: relative;
        top: -6px;
      }

      &-item--selected {
        .ais-RatingMenu-label {
          color: #CE1312;
        }

        .ais-RatingMenu-count {
          background: $media-text-color;
        }
      }
    }

    #genres {
      label {
        display: block;
        cursor: pointer;
        padding: 4px 4px 4px 8px;
        font-weight: normal;
        font-size: .9em;
        margin: 0 0 -1px;

        &:hover {
          color: $white;
          background: $media-text-color;
        }

        input {
          display: none;
        }
      }

      .ais-RefinementList-item--selected {
        border: 1px solid $media-red-dark;
        margin-top: -1px;

        .ais-RefinementList-count {
          background: $media-text-color;
        }
      }
    }
  }

  article {
    margin-top: $header-height + 14px;
    margin-bottom: 10px;
    margin-left: 237px;
    margin-right: 10px;
    padding: 10px 0;
    max-width: 100%;
    background: $white;
    box-shadow: 0 1px 2px $shadow-color;

    #stats {
      padding-right: 14px;
      font-size: .8em;
      line-height: 24px;
    }

    .ais-Hits {
      padding: 0 15px;
    }

    .ais-Pagination {
      &-link {
        background: #F8F8F8;
        border-radius: 0;
        color: #333333;
        padding: 3px 8px;
        margin-right: 4px;
      }
    }

    .hit {
      margin-bottom: 10px;
      height: 130px;
      border: 1px solid #F3F3F3;

      em {
        font-style: normal;
        background: $highlight-color;
        text-decoration: underline;
      }

      .media-object {
        height: 130px;
        width: auto;
      }

      .media-heading {
        color: $media-blue;
        font-weight: normal;
        font-size: 18px;

        i {
          color: #fbae00;
        }
      }
    }
  }

  .thank-you {
    font-size: .8em;
    margin-top: 18px;
    margin-left: 30px;

    a {
      color: #CE1312;
    }
  }
}

.ais-search-box--input {
  padding-left: 14px;
}

.genre, .year {
  margin: 12px 0;
}

.year {
  font-weight: bold;
}

.genre .badge {
  background: #BBBBBB;
}
